<template>
   <scroll-view>
	 <view class="grace-body">
		<view class="title">
			<text>基本查询 </text>
		</view>
		<form @submit="formSubmit" class="grace-form grace-margin-top">
			<view class="grace-items">
				<view class="grace-label">姓名</view>
				<input type="text" class="input" name="nickname" placeholder="请输入姓名" />
			</view>
			<view class="grace-items">
				<view class="grace-label">性别</view>
				<view class="other">
					<picker @change="bindPickerChange" :value="gender[genderIndex]" :range="gender" name="gender">
						<text>{{gender[genderIndex]}}</text>
					</picker>
				</view>
			</view>
				<view class="grace-items">
					<view class="grace-label">联系电话</view>
					<input type="text" class="input" name="phoneno" placeholder="请填写联系电话"></input>
		      </view>
			<view class="grace-items grace-noborder">
				<view class="grace-label">邮箱</view>
				<input type="text" class="input" name="email" placeholder="请输入邮箱" />
			</view>
			<view class="grace-items">
				<view class="grace-label">手机使用时间</view>
				<view class="other">
					<picker @change="bindPhoneChange" :value="Phone[phoneIndex]" :range="Phone" name="use">
						<text>{{Phone[phoneIndex]}}</text>
					</picker>
				</view>
			</view>
		   <view class="title">
		   	<text>其他信息 </text>
		   </view>
		   <view class="grace-items">
				<view class="grace-label">淘宝值</view>
				<input type="number" class="input" name="phoneno" placeholder="请输入淘宝值"></input>
		   </view>
		  <view class="grace-items">
		  	 <view class="grace-label">淘宝值消费情况</view>
					<view class="grace-label-x">
						<checkbox-group name="aihao">
							<label><checkbox value="1"></checkbox>近三个月无消费</label>
							<label><checkbox value="2"></checkbox>近三个月有消费</label>
						</checkbox-group>
		  		</view>
		  	</view>
		   <view class="grace-items">
		   				<view class="grace-label">京东值</view>
		   				<input type="number" class="input" name="phoneno" placeholder="请输入淘宝值"></input>
		    </view>
		   <view class="grace-items">
		   	 <view class="grace-label">京东值消费情况</view>
		   					<view class="grace-label-x">
		   						<checkbox-group name="aihao">
		   							<label><checkbox value="1"></checkbox>近三个月无消费</label>
		   							<label><checkbox value="2"></checkbox>近三个月有消费</label>
		   						</checkbox-group>
		   		</view>
		   	</view>
		    <view class="grace-items">
					<view class="grace-label">信用卡额度</view>
					<input type="number" class="input" name="phoneno" placeholder="请输入额度"></input>
		     </view>
	        <view class="grace-items">
	        	<view class="grace-label">信用卡银行</view>
	        	<view class="other">
	        		<picker @change="bindPickerChange" :value="gender[genderIndex]" :range="gender" name="gender">
	        			<text>{{gender[genderIndex]}}</text>
	        		</picker>
	        	</view>
	        </view>
			<view style="padding:22rpx 0;">
				<button formType="submit" type="primary" style="width:100%;">提交</button>
			</view>
		</form>
		<!-- 数字键盘组件 -->
		<graceNumberKeyboard 
			:show="graceNumberKeyboardShow" 
			v-on:keyboardDone="keyboardDone" 
			v-on:keyboardInput="keyboardInput" 
			v-on:keyboardDelete="keyboardDelete">
		</graceNumberKeyboard>
	</view>
</scroll-view>	
</template>
<script>
var  graceChecker = require("../../graceUI/jsTools/graceChecker.js");
import graceNumberKeyboard from '../../graceUI/components/graceNumberKeyboard.vue'
export default {
	data() {
		return {
			genderIndex: 0,
			phoneIndex:0,
			gender : ['请选择', '男', '女'],
			Phone:["请选择","3个月以下","3个月至6个月","6个月至12个月","12个月以上"],
			dateValue : "请选择",
			graceNumberKeyboardShow : false,
			numberVal : ''
		}
	},

	methods:{ 
		bindPickerChange:function(e){
			console.log(e);
			this.genderIndex = e.detail.value;
		},
		bindPhoneChange:function(e){
			this.phoneIndex = e.detail.value;
		},
		bindDateChange : function(e){
			this.dateValue = e.detail.value;
		},
		showKeyboard : function () {
			//打开数字键盘
			this.graceNumberKeyboardShow = true;
		 },
		 // 监听输入
		keyboardInput : function(e){
			this.numberVal = this.numberVal + '' + e;
		},
		// 监听删除
		keyboardDelete : function(){
			this.numberVal = this.numberVal.substring(0, this.numberVal.length - 1);
		},
		// 完成事件
		keyboardDone : function(){
			this.graceNumberKeyboardShow = false;
		},
		formSubmit : function(e){
			//定义表单规则
			var rule = [
				{name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
				{name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
				{name: "phoneno", checkType: "phoneno", checkRule: "", errorMsg: "请正确填写手机号" },
				{name:"email", checkType : "email", checkRule:"3个月以下,3个月至6个月,6个月至12个月, 12个月以上",  errorMsg:"请填写您正确使用时间"},
				{name:"use", checkType : "in", checkRule:"",  errorMsg:"请填写您的邮箱"}
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
				uni.showToast({title:"验证通过!", icon:"none"});
			}else{
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		}
	},
	components:{
		 graceNumberKeyboard
	}
}
</script>
<style scoped>
.title{
  width: 100%;
  height: 15px;
  line-height: 15px;
  color:#000000;
  margin-top: 20px;
}
.title::after{
  position: absolute;
  content: " ";  
  width: 5px;
  height: 15px;
  background: #007aff;
  left: 5px;
}
.grace-form uni-picker uni-text {
    color: grey;
    font-size: 13px;
}
</style>